<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <link rel="stylesheet" href="/static/css/home.css?v=[[.version]]">
    <script src="/static/js/vue@2.7.16.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/vue-router@3.6.5.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/moment.min.js"></script>
    <script src="/static/js/Sortable.min.js"></script>
    <script src="/static/js/eventsource.1.0.31.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container direction="vertical">
            <my-header :dic_envs="dic_env" :sys_info="sysInfo"></my-header>
            <router-view></router-view>
        </el-container>
    </div>
</body>

<script src="/static/js/home.js?v=[[.version]]"></script>
<script src="/components/header.js?v=[[.version]]"></script>
<script src="/components/config.js?v=[[.version]]"></script>
<script src="/components/config_detail.js?v=[[.version]]"></script>
<script src="/components/config_form.js?v=[[.version]]"></script>
<script src="/components/config_select.js?v=[[.version]]"></script>
<script src="/components/pipeline.js?v=[[.version]]"></script>
<script src="/components/pipeline_form.js?v=[[.version]]"></script>
<script src="/components/config_log.js?v=[[.version]]"></script>
<script src="/components/trace.js?v=[[.version]]"></script>
<script src="/components/source.js?v=[[.version]]"></script>
<script src="/components/env.js?v=[[.version]]"></script>
<script src="/components/message_template.js?v=[[.version]]"></script>
<script src="/components/users.js?v=[[.version]]"></script>
<script src="/components/user.js?v=[[.version]]"></script>
<script src="/components/my_work.js?v=[[.version]]"></script>
<script src="/components/role.js?v=[[.version]]"></script>
<script src="/components/var_params.js?v=[[.version]]"></script>
<script src="/components/setting.js?v=[[.version]]"></script>
<script src="/components/status_change.js?v=[[.version]]"></script>
<script>
    // 路由
    const router = new VueRouter({
        routes: [
            { path: '/', redirect: '/config'},
            { path: '/config', component: MyConfig},
            { path: '/config_detail', component: MyConfigDetail},
            { path: '/pipeline', component: MyPipeline},
            {path: '/source', component: MySource},
            {path: '/message_template', component: MyMessageTemplate},
            {path: '/users', component: MyUsers},
            {path: '/user', component: MyUser},
            {path: '/my/work', component: MyWork},
            {path: '/role', component: MyRole},
            {path: '/logs', component: MyConfigLog},
            {path: '/trace', component: MyTrace},
            {path: '/var_params', component: MyVarParams},
            {path: '/setting', component: MySetting},
        ]
    })
    // vue
    Vue.prototype.$sse = new EventSourcePolyfill("/job/events",{
        headers: {
            'Authorization': cache.getToken()
        }
    })
    Vue.prototype.$auth_tag = cache.getAuthTags()
    // 复制文本到剪切板
    Vue.prototype.copyToClipboard = function (title, text) {
        navigator.clipboard.writeText(text).then(()=> {
            this.$message.success(title+' 已复制到剪贴板')
        }).catch((err)=> {
            this.$message.warning(title+' 复制失败: '+err.toString())
        });
    }

    const v = new Vue({
        el: '#app',
        router: router,
        data(){
            return {
                dic_env:[],
                sysInfo:{cmd_name:"",env:"",env_name:"", version:""},
                env:"", // 手动指定的环境key
            };
        },
        beforeCreate(){

        },
        created(){
            let q = window.location.search
            let searchParams = new URLSearchParams(q)
            this.env = searchParams.get("env")

            this.getSysInfo() // 同步
            this.getDic() // 同步
        },
        mounted(){
            // SSE 监听注册
            // open：订阅成功（和后端连接成功）
            this.$sse.addEventListener("open", function(e) {
                console.log('open successfully',e)
            })
            // error：错误（可能是断开，可能是后端返回的信息）
            this.$sse.addEventListener("error", function(err) {
                console.log(err)
                // 类似的返回信息验证，这里是实例
                err && err.status === 401 && console.log('not authorized')
            })
            // message：后端返回信息，格式可以和后端协商
            this.$sse.addEventListener("message", function(e) {
                console.log("message",e)
            })
        },
        watch:{},
        methods:{
            getSysInfo(){
                api.systemInfo((res)=>{
                    this.sysInfo = res;
                    // 如果服务器时间与本地时间存在较大差异，要给出提示。
                    let ser = new Date(res.current_date)
                    let cur = new Date()
                    let diff = Math.abs(ser.getTime() - cur.getTime())/1000/60 // 分钟
                    console.log("服务器时间",ser.toISOString(), "\n本地  时间",cur.toISOString())
                    if (diff > 10){
                        console.log("服务器时间", ser, "|",cur)
                        this.$notify({
                            title: '注意',
                            dangerouslyUseHTMLString: true,
                            message: '服务器时间与当前系统时间存在较大差异，请核查！<br>服务时间：'+ser.toISOString()+'<br>本地时间：'+cur.toISOString(),
                            type: 'warning'
                        })
                    }
                }, true)
            },
            // 枚举
            getDic(){
                api.dicList([Enum.dicEnv], (list) =>{
                    this.dic_env = list[Enum.dicEnv]
                    // 补充环境名称
                    if (this.env != ""){
                        this.dic_env.forEach((item)=> {
                            if (this.env == item.key){
                                let oldEnv = api.getEnv()
                                this.sysInfo.env = item.key
                                this.sysInfo.env_name = item.name
                                // 环境不同，历史缓存要清除
                                if (oldEnv.env != item.key){
                                    cache.delDic()
                                }
                                api.setEnv(item.key, item.name)
                            }
                        })
                    }
                },true)
            },
        }
    })
</script>
</html>